<template>
  <div class="item">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-button type="primary" @click="TJ_gys_shouye = true">+新建</el-button>
          <el-button v-if="arr.length === 0" type="info" plain>-删除</el-button>
          <el-button v-else type="primary" @click="GYS_shanchu">-删除</el-button>
          <el-button type="primary" @click="getlist">刷新</el-button>
        </div>
      </el-col>
      <el-col :span="24" style="margin-top: 20px;padding-bottom: 20px;">
        <div class="grid-content bg-purple-dark">
          <el-col :span="4" class="sousuo">
            <el-select v-model="SouSuo.SS_xialia" placeholder="请选择活动区域">
              <el-option label="个人" value="Personal" />
              <el-option label="公司" value="Company" />
              <el-option label="虚拟" value="Virtual" />
              <el-option label="内部" value="Internal" />
              <el-option label="模块" value="model" />
              <el-option label="生产车间" value="Product" />
            </el-select>
          </el-col>
          <el-col :span="4" class="sousuo">
            <el-input v-model="SouSuo.ZY_sousuo" placeholder="仓库编号或名称" />
          </el-col>
          <el-button type="primary" @click="ZY_chaxun">查询</el-button>
          <el-button type="info" plain @click="ZY_chongzhi">重置</el-button>
        </div>
      </el-col>
      <el-table ref="multipleTable" border :data="list" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="Code" label="供应商编号" width="180" />
        <el-table-column prop="Name" label="供应商名称" width="180" />
        <el-table-column prop="Type" label="供货商类型" width="120">
          <template slot-scope="scope">{{ scope.row.Type == "Company" ? '公司' : scope.row.Type == 'Personal' ? '个人' : scope.row.Type == 'Internal' ? '内部': scope.row.Type == 'Virtual' ? '虚拟': scope.row.Type == 'model' ? '模块' : '生产车间' }}</template>
        </el-table-column>
        <el-table-column prop="Phone" label="电话" width="100" />
        <el-table-column prop="Email" label="Email" width="100" />
        <el-table-column prop="ContactName" label="联系人" width="100" />
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="SY_bianji(scope.row)">编辑</el-button>
            <el-button type="text" @click="SY_shanchu(scope.row)">删除</el-button>
            <el-button type="text" @click="SY_dizhi(scope.row)">地址</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 新增供应商组件 -->
    <el-dialog title="新增供应商" :visible.sync="TJ_gys_shouye" width="30%">
      <el-form
        ref="GYS_list"
        :model="GYS_list"
        :rules="rules"
        :label-position="labelPosition"
        label-width="100px"
      >
        <el-form-item label="供应商编号:">
          <el-input v-model="GYS_list.Code" placeholder="系统自动生成" :disabled="true" />
        </el-form-item>
        <el-form-item label="供应商名称:" prop="Name">
          <el-input v-model="GYS_list.Name" />
        </el-form-item>
        <el-form-item label="仓库类型:" prop="Type">
          <el-select v-model="GYS_list.Type" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="电话:">
          <el-input v-model="GYS_list.Phone" />
        </el-form-item>
        <el-form-item label="传真:">
          <el-input v-model="GYS_list.Fax" />
        </el-form-item>
        <el-form-item label="Email:">
          <el-input v-model="GYS_list.Email" />
        </el-form-item>
        <el-form-item label="联系人:">
          <el-input v-model="GYS_list.ContactName" />
        </el-form-item>
        <el-form-item label="地址:">
          <el-input v-model="GYS_list.Address" />
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="GYS_list.Remarks" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="TJ_gys_shouye = false">取 消</el-button>
        <el-button type="primary" @click="ZY_quedingTJ">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 地址组件 -->
    <el-drawer
      title="地址设置"
      :visible.sync="DZ_shezhi"
      size="80%"
    >
      <div style="margin-left: 40px;">
        <el-button type="primary" @click="TJ_gys_dizhi = true">+新建</el-button>
        <el-button v-if="DZ_arr.length === 0" type="info" plain>-删除</el-button>
        <el-button v-else type="primary" @click="DZ_shanchu">-删除</el-button>
        <el-button type="primary">刷新</el-button>
        <el-table ref="multipleTable" border :data="DZ_XiangXi" tooltip-effect="dark" style="width: 100%; margin-top: 30px;" @selection-change="XZ_dizhi">
          <el-table-column type="selection" />
          <el-table-column prop="Name" label="编号" />
          <el-table-column prop="Code" label="名称" />
          <el-table-column prop="Address" label="地址" />
          <el-table-column prop="Remarks" label="备注" />
          <el-table-column prop="IsEnable" label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.IsEnable"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="启用"
                inactive-text="停用"
                @change="XG_zhuangtai(scope.row.Id)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="Name" label="默认">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.IsDefault"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="开"
                inactive-text="关"
                @change="XG_moren(scope.row.Id)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="SY_bianji(scope.row)">编辑</el-button>
              <el-button type="text" @click="DZ_HN_shanchu(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
    <!-- 新增地址组件 -->
    <el-dialog title="新增地址" :visible.sync="TJ_gys_dizhi" width="40%">
      <el-form
        ref="XZ_gys_dizhi"
        :model="XZ_gys_dizhi"
        :rules="rules"
        :label-position="labelPosition"
        label-width="100px"
      >
        <el-form-item label="编号:">
          <el-input v-model="XZ_gys_dizhi.Code" />
        </el-form-item>
        <el-form-item label="名称:">
          <el-input v-model="XZ_gys_dizhi.Name" />
        </el-form-item>
        <el-form-item label="地址:">
          <el-input v-model="XZ_gys_dizhi.Address" />
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="XZ_gys_dizhi.Remarks" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="TJ_gys_dizhi = false">取 消</el-button>
        <el-button type="primary" @click="QD_dizhi">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getList, addGongying, delGongying, getGongying, BianJidizhi, getAddress, changeStatus, morenStatus, addAddress, delAddress } from '@/api/gongyingshang'
export default {
  data() {
    return {
      list: [], // 供应商列表
      arr: [], // 被选中的供应商
      SouSuo: {
        ZY_sousuo: '', // 主页搜索框的内容
        SS_xialia: '' // 搜索菜单中的下拉
      },
      DZ_id: '', // 获取点击地址的供应商的id
      XZ_gys_dizhi: { // 新增地址
        Address: '',
        Code: '',
        CusId: '',
        IsDefault: false,
        IsEnable: true,
        Name: '',
        Remarks: '',
        SupId: ''
      },
      DZ_arr: [], // 被选中的地址
      DZ_XiangXi: [], // 地址详细信息
      GYS_list: { // 添加供应商
        Address: '',
        ContactName: '',
        Email: '',
        Fax: '',
        Name: '',
        Phone: '',
        Remarks: '',
        Type: '',
        Id: ''
      },
      TJ_gys_shouye: false, // 控制主页添加供应商组件显示
      TJ_gys_dizhi: false, // 控制主页添加地址组件显示
      DZ_shezhi: false, // 控制地址设置组件显示
      labelPosition: 'right',
      options: [
        {
          value: 'Personal',
          label: '个人'
        },
        {
          value: 'Company',
          label: '公司'
        },
        {
          value: 'Virtual',
          label: '虚拟'
        },
        {
          value: 'Internal',
          label: '内部'
        },
        {
          value: 'model',
          label: '模块'
        },
        {
          value: 'Product',
          label: '生产车间'
        }
      ],
      rules: {
        Name: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' }
        ],
        Type: [
          { required: true, message: '请输入巷道名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    async getlist() { // 获取全部供应商
      this.list = await getList()
      console.log(this.list)
    },
    handleSelectionChange(val) { // 获取被选中仓库id
      this.multipleSelection = val
      console.log('val', val)
      if (val.length > 0) {
        for (let i = 0; i < val.length; i++) {
          if (val[i].Id !== this.arr[i]) {
            this.arr.push(val[i].Id)
          }
        }
      } else {
        this.arr = val
      }
      console.log('arr', this.arr)
    },
    async ZY_quedingTJ() { // 确定添加供应商
      this.$refs.GYS_list.validate(async(valid) => {
        if (valid) {
          await addGongying(this.GYS_list)
          this.getlist()
          this.TJ_gys_shouye = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async GYS_shanchu() { // 选中删除
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delGongying(this.arr)
        this.getlist()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async ZY_chaxun() { // 查询
      this.list = await getGongying(this.SouSuo)
    },
    ZY_chongzhi() { // 重置
      this.SouSuo.SS_xialia = ''
      this.SouSuo.ZY_sousuo = ''
    },
    async SY_bianji(row) { // 行内编辑
      this.GYS_list.Id = row.Id
      this.XZ_gys_dizhi = await BianJidizhi({ id: row.Id })
      // this.getlist()
      this.TJ_gys_dizhi = true
    },
    async SY_shanchu(row) { // 行内删除
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delGongying([row.Id])
        this.getlist()
        this.getlist()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async SY_dizhi(row) { // 行内地址
      this.DZ_id = row.Id
      this.DZ_XiangXi = await getAddress(this.DZ_id)
      this.DZ_shezhi = true
    },
    XZ_dizhi(val) { // 获取被点击的地址
      this.multipleSelection = val
      console.log('val', val)
      if (val.length > 0) {
        for (let i = 0; i < val.length; i++) {
          if (val[i].Id !== this.DZ_arr[i]) {
            this.DZ_arr.push(val[i].Id)
          }
        }
      } else {
        this.DZ_arr = val
      }
      console.log('DZ_arr', this.DZ_arr)
    },
    async XG_zhuangtai(Id) { // 修改地址的状态
      // console.log('Id', Id)
      await changeStatus(Id)
      this.getlist()
    },
    async XG_moren(Id) { // 修改地址的默认开
      // console.log('Id', Id)
      await morenStatus(Id)
      this.getlist()
    },
    async QD_dizhi() { // 确认新增地址
      this.XZ_gys_dizhi.SupId = this.DZ_id
      await addAddress(this.XZ_gys_dizhi)
      this.DZ_XiangXi = await getAddress(this.DZ_id)
      this.TJ_gys_dizhi = false
    },
    async DZ_shanchu() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delAddress(this.DZ_arr)
        this.DZ_XiangXi = await getAddress(this.DZ_id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    DZ_HN_shanchu(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.DZ_arr.push(row.Id)
        await delAddress(this.DZ_arr)
        this.DZ_XiangXi = await getAddress(this.DZ_id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.DZ_arr = ''
      }).catch(() => {
        this.DZ_arr =
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style scoped>
.item {
  margin-left: 50px;
  margin-top: 50px;
  /* background-color: white; */
}

.sousuo {
  padding-right: 10px;
}
</style>
